<template>
    <Page>
        <Topbar hideMenu />
        <Content>
            <Panel header headerBorder title="停机原因补录" style="padding: 4rem;">
                <view slot="toolbar">
                    <view class="back" @click="back">
                        <u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
                    </view>
                </view>
                <view class="table-demo">
                    <Table ref="table" :columns="columns"  requestType="post" :src="src" :params="{}" :data="params" @rowClick="click" pagination />
                </view>
            </Panel>
        </Content>
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Table from '@/components/table/index.vue';
    import {
        getDevice,
    } from "@/store/user.js";
    import {
        setParam,
    } from "@/store/param.js";
    import fetch from "@/utils/fetch.js";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Table
        },
        data() {
            const that = this;
            return {
                src: '/dms/supplementaryRecording/getSupplementaryRecordingList',
                params: {
                    deviceNo: getDevice().deviceNo
                },
                columns: [{
                    label: '停机开始时间',
                    value: 'startTime',
					width:'25rem'
                }, {
                    label: '停机结束时间',
                    value: 'endTime',
                }, {
                    label: '停机类别',
                    value: 'shutdownCategory',
                }, {
                    label: '状态',
                    value: 'state',
                    formatter(value){
                        return that.filterState(value)
                    }
                }, {
                    label: '班次',
                    value: 'shift',
                }],
            }
        },
        methods: {
            filterState(state) {
                switch (state) {
                    case 0:
                        return '停机'
                    case 1:
                        return '运行'
                    case 2:
                        return '待机'
                    case 3:
                        return '待机'
                }
                return '待机';
            },
            back() {
                this.goto('/pages/workbench/index');
            },
            goto(url) {
                uni.navigateTo({
                    url,
                    animationType: "pop-in",
                    animationDuration: 1000,
                })
            },
            click(item) {
                setParam(item);
                this.goto('/pages/workbench/reason/form/index');
            },
            // 分页触发
            change(e) {
                this.getData(e.current)
            },
            // 获取数据
            getData(pageCurrent, value = '') {
                this.loading = true
                this.pageCurrent = pageCurrent
                const deviceNo = getDevice().deviceNo;
                fetch('post', '/dms/supplementaryRecording/getSupplementaryRecordingList',null, {
                    pageSize: this.pageSize,
                    pageNum: this.pageCurrent,
                    deviceNo
                }).then((res) => {
                    this.loading = false;
                    this.tableData = res.records;
                    this.total = res.total;
                });
            }
        },
        mounted(){
            this.$refs['table'] && this.$refs['table'].reload();
        },
        onShow() {
            this.$refs['table'] && this.$refs['table'].reload();
        }
    }
</script>

<style scoped lang="scss">
    .back {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
    }

    .table-demo {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .table {
        width: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ecf0f2;
        border-radius: 2rem;
        overflow: hidden;
        position: relative;

        .table-loading {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.8);
        }

        .table-empty {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4rem 0;
            font-size: 2rem;
        }

        .table-tr {
            display: flex;
            flex-direction: row;
            border-top: 1px solid #ecf0f2;
        }

        .table-th {
            flex: 1;
            background: #edf1f3;
            font-size: 2rem;
            text-align: center;
            padding: 2rem 0;
            overflow: hidden;
        }

        .table-td {
            flex: 1;
            font-size: 2rem;
            text-align: center;
            padding: 1.8rem 0;
            overflow: hidden;
        }

        .text-overflow-ellipsis {
            width: 80%;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 0 auto;
        }
    }

    /deep/ .uni-pagination-box {
        display: flex;
        justify-content: flex-end;
        margin-top: 2rem;
        font-size: 2rem;

        .uni-pagination__total {
            font-size: 2rem;
        }

        .uni-pagination__btn {
            font-size: 2rem;
        }

        .uni-pagination__num {
            font-size: 2rem;
        }

        .uni-pagination__num-tag {
            width: 6rem;
        }
    }
</style>